<template>
	<view class="home">
		<!-- <image v-show="is_open == 1" v-if="isImg" :src="advert" style='vertical-align:top;'></image> -->
		<!-- 信息轮播 -->
		<u-notice-bar type="success" :list="homelist"></u-notice-bar>
		<!-- <view class="swiper">
			<swiper style="height: 136rpx;" :autoplay="true" :interval="3000" :duration="2000" circular>
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="textBox flex-r-s-c">
						<view class="imgBox">
							<image :src="image+`${item.payment_avatar}`" mode=""></image>
						</view>
						<view class="text">{{item.payment_user}}为</view>
						<view class="imgBox">
							<image :src="image+`${item.order_avatar}`" mode=""></image>
						</view>
						<view class="text">{{item.order_user}}{{item.describe}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- logo -->
		<view class="" >
			<view class="one" @tap.code="toNew()">
				
			</view>
			<view class="contentBox">
				<!-- 背景图片 -->
				<view class="imageBox">
					<image src="/static/home/code.png" mode="widthFix"></image>
				</view>
				<view class="other">
					<image src="/static/home/other.png" mode="widthFix"></image>
				</view>
				<view class="imgBig">
					<view class="imgItem" v-for="i in imgList" @tap.stop="toDetail(i.path)">
						<view class="pic" v-if="i.url !='/static/home/Frame.png'" >
							<image :src="i.url" mode="widthFix"></image>
				
						</view>
						<view class="pic" v-else>
							<button open-type="contact" hover-class='none' class="default_btn">
								<image src="/static/home/Frame.png" mode=""></image>
							</button>
						</view>
						
						<view class="" style="color: #222222;font-size: 14px;margin: 10rpx 0;">{{i.title}}</view>
						<view class="" style="font-size: 12px;line-height: 17px;color: #979797;" v-if="i.type!='SERVICE_CENTER'">
							浏览量：{{i.typevalue||0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<u-popup v-model="show" mode="bottom">
			<view class="list">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="code">
						产品信息
					</view>
					<!-- <view class="code" style="color: #FF3E3E;">{{item.status == 0 ? '未付款' : '已支付' }}</view> -->
				</view>
				
				<view class="list_t flex-r-b-c">
					<image :src="image+mesList.imgUrl" mode=""></image>
					<view class="list_t_r">
						<view class="list_t_r_t flex-r-b-c">
							<view class="name">名称：{{mesList.name}}</view>
						</view>
						<view class="specifications">积分：{{mesList.point}}</view>
						<view class="time">状态：{{mesList.state == 0 ? '暂未回收':'回收中'}}</view>
						<view class="" style="display: flex;" v-if="mesList.qrCode && !hasCode">
							<view class="rece" style="margin-top: 30rpx;height: 50rpx;line-height: 50rpx;"  @tap.code="toCode()">
								扫一扫
							</view>
							<view class=""  style="margin: 30rpx 20rpx;height: 50rpx;line-height: 50rpx;color: #979797;">
								( 请扫码外包装二维码 )
							</view>
						</view>
						
					</view>
				</view>
				<view class="" style="display: flex; align-items: center;" v-if="mesList.antiFakeCode && hasCode || mesList.antiFakeCode && !mesList.qrCode">
					<view class="" style="width: 73%;margin-right: 40rpx;">
						<u-form :model="form" ref="uForm" label-position="top" >
							<u-form-item label="请输入烟盒内部防伪码：">
								<u-input v-model="antiFakeCode" :type="number" :border="true" />
							</u-form-item>
						</u-form>
					</view>
					<view class="rece" @tap.stop="receiveSure()">
						确认回收
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				e: null,
				inviter_id: 'xxx',
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				swiperList: [],
				// isImg:true,
				advert:'',
				bannerList:[],
				bigImg:this.$base.imgUrl,
				is_open: 0,
				t:'',
				homelist: ['暂无'],
				mesList:[],
				imgList:[
					{
						url:'/static/home/Frame.png',
						path:'',
						title:'客服中心',
						type:'SERVICE_CENTER'
					},
					{
						url:'/static/home/Group1.png',
						path:'/pages/my/codeTeach/codeTeach',
						title:'扫码教程',
						type:'TUTORIAL'
					},
					{
						url:'/static/home/Group.png',
						path:'/pages/my/rules/rules',
						title:'平台规则',
						type:'WITHDRAWAL_RULES'
					},
					{
						url:'/static/home/Group0.png',
						path:'/pages/my/introduce/introduce',
						title:'行业介绍',
						type:'INTRODUCTION'
					},
				],
				show:false,
				count:'',
				pageViewList:[],
				antiFakeCode:'',
				barCode:'',
				yhDetailsId:'',
				hasCode: false,
				qrCode:''
			};
		},
		onLoad(e) {
			console.log(e,'eeeeeeeeewwwwwwwwwwww')
			if(e.q&&e.q!="undefined"){//扫码进入
				const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
				//GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
				e = this.GetWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
				console.log(e,'eeee1111111111')
				//比如我要得到inviter_id的值，直接取值即可
				uni.setStorageSync('inviter_id',e.inviter_id)
				this.t = uni.getStorageSync('inviter_id')
			}
			if(e.inviter_id){
				uni.setStorageSync('inviter_id',e.inviter_id)
			}
			if(e.scene){
				uni.setStorageSync('scene',e.scene)
			}
			// uni.hideTabBar()
			this.e = e
			// this.showImg()
			
		},
		onShow() {
			this.getHomeSwiper()
			this.bannerSwiper()
		},
		methods: {
			// 扫码详情
			toNew(){
				
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2500
					})
						
					setTimeout(()=>{
						uni.reLaunch({
							url: `/pages/login/login`
						})
					},3000)
					
					return
				}
				let that = this
				that.hasCode = false
				that.antiFakeCode ='',
				that.barCode = '',
				that.yhDetailsId='',
				that.qrCode=''
				uni.scanCode({
					success: function(res) {	
						that.barCode = res.result
						console.log(res,'that.barCode')
						that.$api.checkBarCode({
							barCode:that.barCode
						}).then(res => {
							that.mesList = res.data.data
							console.log(that.mesList,'res')
							that.yhDetailsId = res.data.data.id
							that.show = true
						})
					}
				});
				
			},
			toCode(){
				let that = this
				uni.scanCode({
					success: function(res) {	
						that.qrCode = res.result
						console.log(that.qrCode,'that.toCode',that.yhDetailsId)
						if(!that.mesList.antiFakeCode && that.qrCode){
							that.$api.scanCodeAdd({
								qrCode:that.qrCode,
								yhDetailsId:that.yhDetailsId,
								barCode:that.barCode,
								yhType: that.mesList.yhType
							}).then(res => {
								that.show = false
								setTimeout(()=>{
									that.$utils.toast('扫码成功')
								},1000)
								setTimeout(()=>{
									that.hasCode = true
								},2000)
							})
						}else{
							setTimeout(()=>{
								that.$utils.toast('扫码成功')
							},1000)
							setTimeout(()=>{
								that.hasCode = true
							},2000)
						}
					}
				});
				
			},	
			receiveSure(){
				let that = this
				if(!that.antiFakeCode) return that.$utils.toast('防伪码不能为空')
				that.$api.scanCodeAdd({
					antiFakeCode:that.antiFakeCode,
					barCode:that.barCode,
					yhDetailsId:that.yhDetailsId,
					qrCode:that.qrCode,
					yhType: that.mesList.yhType
				}).then(res => {
					that.show = false
					console.log(res.data,'res22')
					
					if(res.data.code == 200){
						uni.showToast({
							title: '回收成功！',
							icon: 'none',
							duration: 2500
						})
						
					}
				})
			},
			// 跳转
			toDetail(url){
				uni.navigateTo({
					url:url
				})
			},
			GetWxMiniProgramUrlParam (url) {
			  let theRequest = {};
			  if(url.indexOf("#") != -1){
				  const str=url.split("#")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }else if(url.indexOf("?") != -1){
				  const str=url.split("?")[1];
				  const strs=str.split("&");
				  for (let i = 0; i < strs.length; i++) {
				  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  }
			  }
			  return theRequest;
			  },

			showImg(){
				let that = this
				
				that.$api.advert().then(res => {
					this.advert = res.data.data.img
					this.is_open = res.data.data.is_open
					if(this.is_open != 1){
						this.isImg = false
						uni.reLaunch({
							url:'/pages/check/check'
						})
					}else{
						setTimeout(()=>{
							this.isImg = false
							uni.showTabBar()
						},3000)
					}
				})
			
			},
			// 背景图轮播
			bannerSwiper(){
				let that = this
				that.$api.pageView().then(res => {	
					let pageList = res.data.data
					this.imgList = this.imgList.map(item => {
						return {
							...item,
							typevalue:pageList[item.type]
						}
					})
					// console.log(this.imgList ,'word')
				})
			},
			// 文字轮播
			getHomeSwiper(){
				let that = this
				that.$api.rollindex('HOME_NOTICE').then(res => {
					
					that.homelist = [res.data.data.details]
					// console.log(res.data.data,'that.homelist')
				})
			},
			// 生成pk活动
			activity(){
				let that = this
				that.$api.pkIndexCreate().then(res => {
					uni.navigateTo({
						url: '/pages/pk/pk?active_id=' + res.data.data.active_id
					})
				})
			},
			
			// 
			goShop(){
				let that = this
				uni.switchTab({
					url: '/pages/tabBar/shop/shop'
				})
			},
			
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f9f9f9;
	}
	::v-deep .pic button::after{
		border: none;
		background-color: transparent;
		outline: none;    
	}
	.list{
		width: 100%;
		height: auto;
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;
			
		.rece{
			width: 22%;
			height: 60rpx;
			background: #3DAD81;
			color: #fff;
			text-align: center;
			line-height: 60rpx;
			border-radius: 6rpx;
			margin-top: 80rpx;
		}
		.code{
			color: #000;
			font-weight: 600;
			font-size: 12px;
			line-height: 17px;
			margin-bottom: 10rpx;
		}
		.list_t{
			border-top: 1px solid #F9F9F9;
			padding: 10rpx 0;
			image{
				width: 170rpx;
				height: 220rpx;
				margin-right: 30rpx;
			}
				
			::v-deep .u-form-item{
				padding-top: 0 !important;
				width: 70%;
			}
			.list_t_r{
				width: 77%;
				.list_t_r_t{
					font-size: 28rpx;
					font-weight: 400;
					.name{
						margin-top: 6rpx;
					}
					.state{
						color: #7F8084;
					}
				}
				.specifications{
					font-size: 24rpx;
					font-weight: 400;
					color: #3DAD81;
					margin: 16rpx 0;
				}
				.time{
					font-size: 24rpx;
					font-weight: 400;
					color: #979797;
					margin: 20rpx 0;
				}
			}
		}
		.list_b{
			font-size: 28rpx;
			font-weight: 400;
			color: #7F8084;
			padding-top: 30rpx;
			.text{
				.money{
					display: inline-block;
					font-size: 32rpx;
					font-weight: 600;
					color: #000;
				}
			}
		}
		
		.btnBox{
			width: 100%;
			margin-top: 30rpx;
			flex-direction: row-reverse !important;
			.btn{
				width: 132rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 46rpx;
				text-align: center;
				background-color: #000;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		
	}
	.home{
		width: 100vw;
		height: 100vh;
		.one{
			width: 34%;
			height: 9%;
			position: absolute;
			z-index: 1000;
			top: 9.4%;
			left: 62%;
			color: transparent;
			// border: 1px solid black;
		}
		image{
			width: 100%;
			height: 100%;
		}
		.logoBox{
			width: 92rpx;
			margin-left: 50rpx;
		}
		.imgBig{
			margin:0 20rpx;
			display: flex;
			flex-wrap: wrap;
			.imgItem{
				width: 260rpx;
				height: 300rpx;
				// width: 38%;
				margin: 40rpx;
				text-align: center;
				vertical-align: center;
				// border: 1px solid green;
				image{
					width: 270rpx !important;
					height: 240rpx !important; 
				}
			}
			.imgItem:nth-child(2) {
				width: 260rpx;
				height: 300rpx;
				padding: 10rpx;
				image{
					width: 260rpx !important;
					height: 230rpx !important; 
				}
				.pic{
					margin-top: 20rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.swiper{
			width: 90%;
			height: 136rpx;
			background: #fff;
			margin: 10rpx auto 20rpx;
			border-radius: 24rpx;
			position: absolute;
			bottom: 10rpx;
			left: 40rpx;
			z-index: 10;
			.textBox{
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				.imgBox{
					width: 70rpx !important;
					height: 70rpx !important;
					border-radius: 50%;
					overflow: hidden;
					margin-right:4rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					font-size: 24rpx;
					font-weight: 400;
					margin-left: 8rpx;
					margin-right: 6rpx;
					flex: 1;
				}
			}
		}
		.contentBox{
			width: 100%;

			.imageBox {
				width: 92%;
				margin: 20rpx 30rpx;
				border-radius: 20rpx;
				position: relative;
				left: 0;
				top: 0;
				z-index: 1;
			}
			.other{
				margin: 30rpx 30rpx 0;
				width: 140rpx;
			}
			.listBox{
				width: 100%;
				height: 166rpx;
				background-color: #f9f9f9;
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				position: relative;
				left: 0;
				top: -133rpx;
				z-index: 9;
				.list{
					width: 330rpx;
					height: 330rpx;
					background-color: #fff;
					border-radius: 24rpx;
					margin-top: -165rpx;
					text-align: center;
					.imgBox{
						margin: 0 auto;
						margin-top: 60rpx;
					}
					.title{
						font-size: 32rpx;
						font-weight: 600;
						margin: 20rpx auto;
					}
					.text{
						font-size: 24rpx;
						font-weight: 400;
						color: #7F8084;
					}
				}
			}
		}
	}
	
		
	::v-deep .imageBox swiper{
		height: 70vh !important;
	}
</style>
